<div class="header">
  <div class="title pl-3 pr-3 text-light" (click)="logoClick()" [ngStyle]="{width: logoWidth + 'vw'}">
    <span class="h6" *ngIf="logoWidth !== 3">安全生产信息化系统</span>
    <i class="iconfont iconzu381" *ngIf="logoWidth === 3"></i>
  </div>
  <div class="user-info">
    <div class="pancel pt-3 pb-3 text-light">
      <span class="setting pl-3 pr-3" *ngIf="setingBar.length !== 0">
        <i class="iconfont iconOutline setting" (click)="setClick()"></i>
      </span>
      <span (click)="showNoticeClick()" class="remind pl-3 pr-3">
        <i class="iconfont iconNotificationIcon"></i>
        <span class="bage" *ngIf="noticeItem.length > 0"></span>
      </span>
    </div>
    <div class="user pl-3 pr-3 text-light" (click)="headerSideBarShow=true">
      <span class="mr-3">{{username}}</span>
      <i class="fa fa-user-circle" aria-hidden="true" style="font-size: 30px"></i>
    </div>
  </div>
  <div class="sidebar">
    <p-sidebar
      [modal]="true"
      [blockScroll]="true"
      [(visible)]="headerSideBarShow"
      [showCloseIcon]="false"
      position="right">
      <app-header-sidebar></app-header-sidebar>
    </p-sidebar>
  </div>
<!--  <div [hidden]="!showNotice" >-->
<!--    <app-notice (noticeState)="getNoticeState($event)"></app-notice>-->
<!--  </div>-->
  <p-dialog header="待办事项" [(visible)]="showNotice" [showHeader]="true">
    <div class="notice">
<!--      <div class="notice-title">-->
<!--&lt;!&ndash;        <h3>&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash;      ({{eventNum}})&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        </h3>&ndash;&gt;-->
<!--      </div>-->
      <div class="notice-body">
        <p-scrollPanel [style]="{width: '100%', height: '38vh'}" >
          <div class="notice-item" *ngFor="let item of noticeItem; let i = index">
<!--            <div class="item-left">-->
<!--              <span class="left-num">{{item.currageNum}}/{{item.totalNum}}</span>-->
<!--            </div>-->
<!--            <div class="item-right">-->
<!--              <p class="item-font-title">{{item.text}}</p>-->
<!--              <p class="item-right-time">{{item.time}}</p>-->
<!--            </div>-->
            <p class="item"><span>{{i + 1}} . </span>{{item}}</p>
          </div>
        </p-scrollPanel>
        <div class="notice-footer">
          <span (click)="close()">关闭</span>
        </div>
      </div>
    </div>
  </p-dialog>
</div>
